<template>
  <div style="display: flex">
    {{ this.form.generativeRule }}
    <el-form ref="form" :model="form" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="编号前缀">
              <el-input v-model="form.prefix" @change="prefixRule"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12"
          ><div class="grid-content bg-purple">
            <el-form-item label="目标表单">
              <el-input
                v-model="form.formCode"
                @onchange="formCodeRule"
              ></el-input>
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="提交数据">
              <el-radio-group v-model="form.resource">
                <el-radio label="年" @change="Year"></el-radio>
                <el-radio label="年月" @change="month"></el-radio>
                <el-radio label="年月日" @change="day"></el-radio>
                <el-radio label="年月日时分秒" @change="all"></el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12"
          ><div class="grid-content bg-purple">
            <el-form-item label="流水号(位)">
              <el-input
                v-model="form.serialNumber"
                @change="NumRule"
              ></el-input>
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="编号生成">
              <el-input v-model="form.generativeRule"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="编号预览">
              <el-input v-model="ss"></el-input>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="AddInfo">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      b: "",
      alls: "",
      ss: "",
      form: {
        formCode: "",
        prefix: "",
        submitTime: "2023-11-28",
        serialNumber: "",
        generativeRule: "",
        createDate: "2023-11-28",
        createID: 20,
        modifier: "yueyue",
        RuleId: "",
        RuleNumber: "",
      },
    };
  },

  methods: {
    prefixRule() {
      //this.form.generativeRule = this.form.prefix;
      this.form.generativeRule =
        this.form.prefix + this.form.formCode + this.form.RuleId;
    },
    NumRule() {
      var Reg = /^[1-9]$/;
      if (!Reg.test(this.form.serialNumber)) {
        this.$message.error("只能输入数字1-9");
        return;
      }
      switch (this.form.serialNumber) {
        case "1":
          this.form.RuleId = "1~9";
          this.form.RuleNumber = "1";
          break;
        case "2":
          this.form.RuleId = "1~99";
          this.form.RuleNumber = "01";
          break;
        case "3":
          this.form.RuleId = "1~999";
          this.form.RuleNumber = "001";
          break;
        case "4":
          this.form.RuleId = "1~9999";
          this.form.RuleNumber = "0001";
          break;
        case "5":
          this.form.RuleId = "1~99999";
          this.form.RuleNumber = "00001";
          break;
        case "6":
          this.form.RuleId = "1~999999";
          this.form.RuleNumber = "000001";
          break;
        case "7":
          this.form.RuleId = "1~9999999";
          this.form.RuleNumber = "0000001";
          break;
        case "8":
          this.form.RuleId = "1~99999999";
          this.form.RuleNumber = "00000001";
          break;
        case "9":
          this.form.RuleNumber = "000000001";
          this.form.RuleId = "1~999999999";
          break;
      }
      this.custom();
      this.fuck();
    },
    Year() {
      let date = new Date();
      this.alls = date.getFullYear();
      this.custom();
      this.fuck();
    },
    month() {
      let date = new Date();
      let year1 = date.getFullYear();
      let month1 = date.getMonth() + 1;
      this.alls = "" + year1 + month1;
      this.custom();
      this.fuck();
    },
    day() {
      let date = new Date();
      let year1 = date.getFullYear();
      let month1 = date.getMonth() + 1;
      let monthall = "" + year1 + month1;
      let day1 = date.getDate();
      this.alls = "" + monthall + day1;
      this.custom();
      this.fuck();
    },
    all() {
      let date = new Date();
      let year1 = date.getFullYear();
      let month1 = date.getMonth() + 1;
      let monthall = "" + year1 + month1;
      let day1 = date.getDate();
      let dayall = "" + monthall + day1;
      let hour = date.getHours();
      let minu = date.getMinutes();
      let second = date.getSeconds();
      this.alls = "" + dayall + hour + minu + second;
      this.custom();
      this.fuck();
      this.NumRule();
    },
    custom() {
      this.form.generativeRule =
        this.form.prefix + this.form.resource + this.form.RuleId;
    },
    fuck() {
      this.ss = "" + this.form.prefix + this.alls + this.form.RuleNumber;
    },
    AddInfo() {
      var Reg = /^[1-9]$/;
      if (!Reg.test(this.form.serialNumber)) {
        this.$message.error("只能输入数字1-9");
        return;
      }
      this.axios
        .post(`http://localhost:5255/api/Custom/AddCustomInfo`, this.form)
        .then((ret) => {
          if (ret.data.Success) {
            this.$message(ret.data.ErrorInfo);
          }
        });
    },
  },
  created() {},
};
</script>
<style>
.el-row {
  margin-bottom: 10px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>